<template>
 <div class="main">
  <h1>{{ $t('custody.standards.title') }}</h1>

  <el-table :data="list" stripe>
   <el-table-column :label="$t('custody.standards.t1')" prop="fee" align="center"></el-table-column>
   <el-table-column :label="$t('custody.standards.t2')" align="center">
    <template slot-scope="scope">
     <p class="fee">{{ scope.row.new }} <span>{{ scope.row.old }}</span></p>
    </template>
   </el-table-column>
   <el-table-column align="right" width="120">
    <template slot="header" slot-scope="scope"><p class="discount-tips">50% {{ $t('custody.standards.off') }}</p></template>
   </el-table-column>
  </el-table>

  <h6>{{ $t('custody.standards.p1') }}</h6>

  <p>{{ $t('custody.standards.p2') }}</p>
 </div>
</template>

<script>
export default {
 name: "Standards",
 data: () => ({
  list: [
   {
    fee: '≥10',
    new: '0.5%',
    old: '1.0%'
   },
   {
    fee: '≥100',
    new: '0.4%',
    old: '0.8%'
   },
   {
    fee: '≥500',
    new: '0.3%',
    old: '0.6%'
   },
   {
    fee: '≥1000',
    new: '0.2%',
    old: '0.4%'
   }
  ]
 })
}
</script>

<style scoped lang="scss">
.main {
 padding-bottom: 100px;
 text-align: center;

 >p{
  font-size: 16px;
  color: #010101;
 }

 h1 {
  font-size: 30px;
  color: #000;
  padding-bottom: 50px;
 }

 .el-table {
  border-bottom: none;

  /deep/ .cell {
   position: relative;
  }

  /deep/ th {
   background-color: #ECF6FF;
   font-weight: normal;
  }
 }
}

/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
 background-color: #F9FCFF !important;
}

/deep/ .el-table td,/deep/ .el-table th.is-leaf {
 border-bottom: none;
}

.discount-tips {
 background: #fa6400;
 border-radius: 2px 0 2px 2px;
 padding: 0 8px;
 font-size: 12px;
 font-weight: 600;
 color: #f6f7fb;
 text-decoration: unset !important;
 line-height: 28px;
 width: 64px;
 white-space: nowrap;
 margin-left: auto;
 position: relative;
 right: -10px;
}

h6 {
 font-size: 20px;
 color: #010101;
 padding: 30px 0 20px;
}
</style>
